<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>setTimeout延时执行</h1>
    <p>在多少毫秒后，执行“一次”传入的函数</p>
    <p>如果要做出重复执行函数的效果，该如何做？递归调用。</p>
    <h2>使用方式</h2>
    <ul>
        <li>setTimeout(函数,固定频率毫秒数)</li>
        <li>setTimeout("函数()",固定频率毫秒数)</li>
    </ul>
    <p>setTimeout返回：返回一个id对象，用于作为clearTimeout的参数，以停止延时执行任务。</p>
    <p id="p1"></p>
    <button onclick="startTimeout()">启动</button>
    <button onclick="stopTimeout()">停止</button>
    <script>
        let a = ["我一定会回来的","信仰是为了虚无的人类","代表月亮消灭你","变身超级赛亚人"];
        let p = document.querySelector("#p1");

        let i = 0;

        function changeText() {
            p.innerText = a[i ++];
            if (i >= a.length) {
                i = 0;
            }
            timeoutId = setTimeout(changeText,1000);
        }

        let timeoutId;

        function startTimeout() {
            if (null == timeoutId) {
                timeoutId = setTimeout(changeText,1000)
            }
        }

        function stopTimeout() {
            if (null != timeoutId) {
                clearTimeout(timeoutId);
                timeoutId = null;
            }
        }

        
    </script>
</body>
</html>